<template>
  <div class="home">
    <div class="home_left">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="album-nov">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item class="album_type_list">相册分类</el-breadcrumb-item>
        <el-breadcrumb-item v-if="!img_type">相册详情</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 显示类型 -->
      <div v-if="img_type">
        <div class="album-type" v-for="(item,index) in albums" :key="index" @click="getTypeImgs(item,albumNumber[index])">
          <div class="album-type-img" v-if="item.warp_url">
            <img :src="'http://blog.com'+item.warp_url" alt="用户">
          </div>
          <div class="album-type-img" v-if="!item.warp_url">
            <img src="../assets/img_.jpg" alt="默认">
          </div>
          <div class="album-type-number" v-text="albumNumber[index]"></div>
          <div class="album-type-title">{{item.cate_name}}</div>
        </div>
      </div>

      <!-- 显示图库详情 -->
      <div class="getTypeImgWarp" v-if="!img_type">
        <!-- 头部显示相册详情 -->
        <div class="getTypeImgTitle">
          <!-- <div class="getTypeImgTitle-img" v-if="ImgType.warp_url">
            <img src="../assets/img_.jpg" alt="">
          </div> -->
           <div class="getTypeImgTitle-img" v-if="ImgType.warp_url">
            <img :src="'http://blog.com'+ImgType.warp_url" alt="用户">
          </div>
          <div class="getTypeImgTitle-img" v-if="!ImgType.warp_url">
            <img src="../assets/img_.jpg" alt="默认">
          </div>
          <div class="getTypeImgTitle-right">
            <div class="Title-right-title">
              <!-- <el-breadcrumb separator="/">
                <el-breadcrumb-item style="color:red">相册名称：{{ImgType.cate_name}}</el-breadcrumb-item>
                <el-breadcrumb-item>共有&nbsp;&nbsp;{{ImgType.num}}&nbsp;&nbsp;张照片</el-breadcrumb-item>
              </el-breadcrumb> -->
              <span style="font-size:16px;">相册名称：{{ImgType.cate_name}}</span>
              <span style="font-size:16px;">/</span>
              <span style="font-size:13px;">共有&nbsp;&nbsp;{{ImgType.num}}&nbsp;&nbsp;张照片</span>
            </div>
            <div class="title-bottom">
              <span style="font-size:12px; color:#a7a6a6;">创建时间：&nbsp;&nbsp;{{ImgType.created_at}}&nbsp;&nbsp;</span>
            </div>
          </div>
          <div class="get_list_type" @click="get_album_type1">返回列表</div>
        </div>
        <!-- 主题部分展示图片 -->
        <div class="getTypeImgCont">
          <div class="album-type" v-for="(item,index) in ImgAll" :key="index">
            <div class="album-type-img">
              <img :src="'http://blog.com/'+item.alb_img" alt="用户上传">
            </div>
            <div class="album-type-title">{{item.created_at}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 热门 -->
    <div class="home_right" >
        <div class="album-hot_warp">
          <div class="model_nav">热门文章</div>
          <ul class="hot_ul">
            <li v-for="(item , index) in hot" :key="index">
              <!-- 排行数 -->
              <div class="_ranking">{{ ++ index}}</div>
              <div class="_title">
                <router-link :to="{path:'/details',query:{id:item.id}}" >{{item.title}}</router-link>
              </div>
            </li>   
          </ul> 
        </div>
        <lable style='background-color: #e3e3e3;padding:8px;border-radius: 6px;margin-left:0;margin-bottom:60px;'></lable>
    </div>
  </div>
</template>

<script>
// import hot from '@/components/Hot.vue'
import lable from '@/components/Lable.vue'

export default {
  data(){
    return{
      hot:[],
      albums:[],
      albumsa:[],
      albumNumber:[],
      img_type:true,
      ImgAll:[],
      ImgType:{}
    }
  },
  // /api/api/photocate
  created(){
    this.$http.get('http://blog.com/api/api/hotartical').then((result) => {
      this.hot = result.data.data
     })
     this.get_album_type();
  },
  components:{
    lable
  },
  methods:{
    get_album_type(){
      this.$http.get('http://blog.com/api/api/photocate').then((result) => {
      this.albums = result.data.data
      this.albumNumber = result.data.data1
     })
    },
    get_album_type1(){
      this.img_type = true
    },
    getTypeImgs(val,num){
      val.num = num
      this.ImgType = val
      // console.log(this.ImgType)
      if(val.cate_name.indexOf('私') != -1){
        // 增加用户判断
        this.$message.warning('涉及私密相册，查看请联系管理员！')
      }else{
        this.getImgAll(val.cate_name)
        this.img_type = false
      }
      // this.getImgAll(val.cate_name)
    },
    // 请求详细数据
    getImgAll(val){
      this.$http.get('http://blog.com/api/api/photo?cate_name=' + val).then((result) => {
        this.ImgAll = result.data.data
      })
    }
  }
}
</script>

<style>
.album-nov .album_type_list{
  cursor: pointer;
}

.get_list_type{
  /* border: 1px solid #424242; */
  float: right;
  padding: 8px;
  margin-top: 10px;
  margin-right: 20px;
  cursor: pointer;
  color: #4cb9f0;
}


/* 详情 */
.getTypeImgWarp{
  margin-top: 5%;
  height: 500px;
}
.getTypeImgTitle{
  height: 100px;
  padding: 6px;
  border: 2px solid #e9e6e6;
}
.getTypeImgTitle::after{
  content: '';
  display: block;
  clear: both;
}
.getTypeImgTitle-img{
  float: left;
  overflow: hidden;
  border-radius: 4px;
  width: 90px;
  height: 100px;
}
.getTypeImgTitle-img>img{
  width: 100%;
  height: 100%;
}
.getTypeImgTitle-right{
  float: left;
  margin-left: 20px;
  margin-top: 2px;
  height: 100px;
}
.Title-right-title{
  margin-top: 12px;
}
.Title-right-title > span{
  margin-right: 8px;
}
.title-bottom{
  margin-top: 40px;
  text-align: left;
}
.getTypeImgCont{
  margin-top: 60px;
}

.album-warp{
  width: 80%;
  margin: 0 auto;
}
.album-nov{
  padding: 8px;
  background-color: #f1f1f1;
}
 .album-hot_warp{
    text-align: left;
    background-color: #f1f1f1; 
    padding:8px;
    border-radius: 6px;
    margin-top: 0;
  }
  ._title a{
    color: #424242;
  }
  ._heat > span{
    display: inline-block;
    min-width: 40px;
    text-align: center;
  }
  ._heat > span:first-child{
    font-size: 15px;
  }
  .album-type{
    float: left;
    width: 166px;
    height: 186px;
    border-radius: 6px;
    margin-top: 26px;
    margin-left: 20px;
    position: relative;
    cursor: pointer;
    background-color: #f1f1f1;
  }
  .album-type-img{
    width: 90%;
    height: 80%;
    margin: 3px auto;
    margin-top: 8px;
    border-radius: 3px;
    overflow: hidden;
  }
  .album-type-img > img{
    width: 100%;
    height: 100%;
  }
  .album-type-number{
    position: absolute;
    right: 14px;
    bottom: 20%;
    font-size: 22px;
    color: #f0f0f0;
  }
  .album-type-title{
    height: 26px;
    line-height: 26px;
    font-size: 13px;
  }
</style>